<!-- 生产计划 -->
<template style="height:100%;">
  <div class="app-container" style="height:100%;">
    <el-card class="box-card">
      <div class="search-and-button">
        <el-button type="primary" size="small" icon="el-icon-plus" class="btnDis" @click="showDialog()">新增</el-button>
        <el-button type="primary" size="small" plain :icon="!show ? 'el-icon-arrow-down' : 'el-icon-arrow-up'" @click="show = !show">查询条件</el-button>
        <el-button type="primary" size="small" icon="el-icon-search" @click="getTableInfo()">查询</el-button>
      </div>
      <transition name="el-zoom-in-top">
        <div v-show="show" class="more-search">
          <el-form :model="search" size="mini" label-width="70px">
            <el-row>
              <el-col :span="6">
                <el-form-item label="计划时间" prop="beginDate">
                  <el-date-picker v-model="search.time" style="width: 100%" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择日期时间" @change="getTableInfo()" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="单号" prop="objNo">
                  <el-input v-model="search.objNo" placeholder="请输入单号进行搜索" clearable @keyup.enter.native="getTableInfo()" @clear="getTableInfo()" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="状态" prop="status">
                  <el-select style="width: 100%" @change="getTableInfo()" v-model="search.status" filterable>
                    <el-option label="全部" value></el-option>
                    <el-option label="未下达" :value="1"></el-option>
                    <el-option label="部分下达" :value="2"></el-option>
                    <el-option label="已下达" :value="3"></el-option>
                    <el-option label="已完成" :value="4"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="类型" prop="type">
                  <el-select style="width: 100%" @change="getTableInfo()" v-model="search.type" filterable>
                    <el-option label="全部" value></el-option>
                    <el-option label="订单" value="订单"></el-option>
                    <el-option label="备库" value="备库"></el-option>
                    <el-option label="其他" value="其他"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </transition>
      <el-row class="table">
        <el-table ref="tableData" v-loading="loading" :data="tableData" stripe border>
          <el-table-column type="selection" align="center"></el-table-column>
          <el-table-column align="center" type="index" label="索引" width="60px" />
          <el-table-column v-for="item in fieldList" :key="item.id" :align="item.align || 'left'" :prop="item.code.split(':')[1]" :label="item.val" :min-width="item.width + 'px'" show-overflow-tooltip>
            <template #default="{ row }">
              <span v-if="item.code.split(':')[1] === 'planNo'" class="tabNoStyle" @click="planNoChange(row)">{{ row.planNo || 0 }}</span>
              <span v-else>{{ row[item.code.split(':')[1]] }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" align="center" width="100px">
            <template #default="{ row }">
              <el-button-group>
                <el-button type="text" @click="showDialog(row)">
                  <i class="iconfont icon-search"></i>
                </el-button>
              </el-button-group>
            </template>
          </el-table-column>
        </el-table>
      </el-row>

      <el-row>
        <div class="table-btn-box">
          <el-button @click="
            () => {
              tableData.forEach(row => {
                $refs['tableData'].toggleRowSelection(row, true)
              })
            }
          ">选择全部</el-button>
          <el-button @click="
            () => {
              tableData.forEach(row => {
                $refs['tableData'].toggleRowSelection(row)
              })
            }
          ">反向选择</el-button>
          <el-button>
            更多菜单
            <i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
        </div>
        <pagination ref="Pagination" :total="total" :current.sync="search.current" :size.sync="search.size" @pagination="getTableInfo" />
      </el-row>
    </el-card>
    <!-- 新增编辑 -->
    <addAndModify ref="addAndModify" :user-all-list="userAllList" :material-all="materialList" @getTableInfo="getTableInfo" />
    <!-- 详情 -->
    <no-detail ref="noDetail" @getTableInfo="getTableInfo" />
  </div>
</template>
<script>
import ImportFile from '@/components/ImportFile'
import Pagination from '@/components/Pagination'
import addAndModify from './components'
import noDetail from './components/noDetail'
import { getUserListApi } from '@/api/public'
export default {
  components: { Pagination, ImportFile, addAndModify, noDetail },
  data() {
    return {
      loading: false,
      tableData: [],
      total: 0,
      search: {
        current: 1,
        size: 20,
        keyword: '',
        beginDate: '',
        endDate: '',
        objNo: '',
        status: '',
        type: '',
        time: []
      },
      show: false,
      userAllList: [],
      materialList: []
    }
  },
  computed: {},
  created() {},
  mounted() {
    this.getTableInfo()
    this.getUserAll()
    this.getMaterialALL()
  },
  methods: {
    /** 所有物料 */
    async getMaterialALL() {
      const res = await this.$axios.post(`/material/info/list`, {
        size: 999,
        current: 1
      })
      if (res.data.code === 200) {
        this.materialList = res.data.data.list
      }
    },
    async getUserAll() {
      const res = await getUserListApi()
      if (res?.data.code === 200) {
        this.userAllList = res.data.data
      }
    },
    /**
     * @description: page
     * @param {*} page
     * @return {*}
     */
    async getTableInfo(page = 1) {
      this.search.current = page
      const { time } = this.search
      if (time && time.length) {
        this.search.beginDate = time[0]
        this.search.endDate = time[1]
      } else {
        this.search.beginDate = ''
        this.search.endDate = ''
      }
      const search = {
        ...this.search
      }
      delete search.time
      this.loading = true
      const res = await this.$axios.post('/pro/plan/list', search)
      if (res?.data.code === 200) {
        this.tableData = res.data.data.list
        this.total = res.data.data.total
        setTimeout(() => {
          this.loading = false
        }, 100)
      } else {
        this.loading = false
      }
    },
    /**
     * @description: 新增编辑
     * @return {*}
     */
    showDialog(row) {
      if (row && row.status !== 1) {
        this.$notify.error('只能未下达可编辑！')
      } else {
        this.$refs['addAndModify'].showDialog(row)
      }
    },
    planNoChange(row) {
      this.$refs['noDetail'].showDialog(row)
    }
  }
}
</script>
<style lang='scss' scoped>
.search-and-button {
  width: 100%;
  min-height: 27px;
  line-height: 27px;
  height: 27px;
  overflow: hidden;
  transition: height 0.3s;
  display: flex;
  justify-content: right;
  .el-form-item {
    margin-bottom: 0 !important;
  }
  .btnDisplay {
    height: 27px;
    margin-right: 10px;
    .btnDis {
      height: 27px;
      visibility: hidden;
    }
    &:hover {
      .btnDis {
        visibility: visible;
      }
    }
  }
}
.showSearch {
  height: 75px;
}
.arrow {
  text-align: center;
  cursor: pointer;
  font-size: 13px;
}

.more-search {
  margin-top: 10px;
  .el-form {
    padding: 10px 10px 0 10px;
    .el-col {
      max-width: 380px;
      min-width: 150px;
      height: 40px;
      line-height: 40px;
      .el-input {
        width: 100%;
      }
    }
  }
}
.table {
  margin-top: 20px;
}
</style>
